@charset "utf-8";
@import './variable.scss';
@import './mixin.scss';

html,body,#root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.icon {
  font-size: 16px;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 公共样式 start */
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.flex {
  @include flex();
}
.flex-column {
  @include flex(column);
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.flex-center {
  @extend .justify-content-center;
  @extend .align-items-center;
}
.flex-wrap {
  flex-wrap: wrap;
}

@for $i from 1 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}

$abs-zero: 'top', 'bottom', 'left', 'right';
@each $i in $abs-zero {
  .#{$i}-0 {
    #{$i}: 0
  }
}

$general-width: 50,80,100;
@each $i in $general-width {
  .width-#{$i} {
    width: $i * 1%;
  }
  .height-#{$i} {
    height: $i * 1%;
  }
}

$pdmd-sizes: 2,4,6,8,10,12,14,16,18,20;
@each $i in $pdmd-sizes {
  .p-#{$i} {
    padding: $i * 1px;
  }
  .p-x-#{$i} {
    padding-left: $i * 1px;
    padding-right: $i * 1px;
  }
  .p-y-#{$i} {
    padding-top: $i * 1px;
    padding-bottom: $i * 1px;
  }
  .p-l-#{$i} {
    padding-left: $i * 1px;
  }
  .p-t-#{$i} {
    padding-top: $i * 1px;
  }
  .p-r-#{$i} {
    padding-right: $i * 1px;
  }
  .p-b-#{$i} {
    padding-bottom: $i * 1px;
  }
  .m-#{$i} {
    margin: $i * 1px;
  }
  .m-x-#{$i} {
    margin-left: $i * 1px;
    margin-right: $i * 1px;
  }
  .m-y-#{$i} {
    margin-top: $i * 1px;
    margin-bottom: $i * 1px;
  }
  .m-t-#{$i} {
    margin-top: $i * 1px;
  }
  .m-l-#{$i} {
    margin-left: $i * 1px;
  }
  .m-r-#{$i} {
    margin-right: $i * 1px;
  }
  .m-b-#{$i} {
    margin-bottom: $i * 1px;
  }
}

$font-sizes: 8,10,12,14,16,20,24,28,30;
@each $i in $font-sizes {
  .f-s-#{$i} {
    font-size: $i * 1px;
  }
}

.color-primary {
  color: $primary-color;
}
.color-white {
  color: #fff;
}
.color-black {
  color: #000;
}

.color-3 {
  color: #333;
}
.color-6 {
  color: #666;
}
.color-9 {
  color: #999;
}
.bg-primary {
  background-color: $primary-color;
}
.bg-f {
  background-color: #fff;
}
.bg-fa {
  background-color: #fafafa;
}
.bg-transparent {
  background-color: transparent;
}


.clearfix {
 @include clearfix();
}

@for $i from 1 through 3 {
  .text-over-#{$i} {
    @include ellipse($i);
  }
}

/* 公共样式 end */
